<template>
	<view class="MainBox">
		<view class="CardBox">
			<view class="logoBox">
				<!-- <image class="logo" src="../../static/images/logo.png"></image> -->
			</view>

			<view class="selectBox">
				<button class="login" @click="goToLogin">马上登录</button>
				<button class="register">马上注册</button>
			</view>

			<view class="inputItem">
				<image class="icon" src="/static/images/loAndRe/account.png"></image>
				<input 
					class="inputField" 
					type="number" 
					placeholder="请输入手机号" 
					v-model="phone"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>

			<view class="inputItem">
				<image class="icon" src="/static/images/loAndRe/code.png"></image>
				<input 
					class="inputField" 
					type="text" 
					placeholder="请输入短信验证码" 
					v-model="code"
					placeholder-style="color:#ccc;font-size:14px;"
					style="flex: 1;"
				/>
				<button 
					class="getCodeBtn" 
					:disabled="isCounting || !isValidPhone"
					@click="sendCode"
				>
					{{ countingText }}
				</button>
			</view>
			<view class="inputItem">
				<image class="icon" src="/static/images/loAndRe/password.png"></image>
				<input 
					class="inputField" 
					type="password" 
					placeholder="设置登录密码（6-20位）" 
					v-model="password"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>

			<view class="inputItem">
				<image class="icon" src="/static/images/loAndRe/password.png"></image>
				<input 
					class="inputField" 
					type="password" 
					placeholder="请再次输入密码" 
					v-model="confirmPassword"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>

			<button class="loginBtn" @click="handleRegister">注册</button>

			<view class="termsBox">
				<label>
					<checkbox value="accept" :checked="isTermsAccepted" @click="toggleTerms"/>
					我已阅读并同意<text @click="openTermsPage">服务条款</text>以及<text @click="openTermsPage">隐私权政策</text>
				</label>
			</view>
		</view>
		<image class="img" src="../../static/images/people3.png"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				password: '',
				confirmPassword: '',
				isTermsAccepted: false,
				isCounting: false,
				countdown: 60
			}
		},
		computed: {
			isValidPhone() {
				const reg = /^1[3-9]\d{9}$/;
				return reg.test(this.phone);
			},
			countingText() {
				return this.isCounting ? `${this.countdown}s 后重发` : '获取验证码';
			}
		},
		methods: {
			goToLogin() {
				uni.navigateTo({ url: '/pages/login/login' });
			},
			async sendCode() {
				if (!this.isValidPhone) {
					uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
					return;
				}
				uni.showToast({ title: '验证码已发送', icon: 'success' });

				this.isCounting = true;
				this.countdown = 60;
				const timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(timer);
						this.isCounting = false;
					}
				}, 1000);
			},
			handleRegister() {
				if (!this.phone || !this.code || !this.password || !this.confirmPassword) {
					uni.showToast({ title: '请填写完整信息', icon: 'none' });
					return;
				}
				if (!this.isValidPhone) {
					uni.showToast({ title: '手机号格式不正确', icon: 'none' });
					return;
				}
				if (this.password.length < 6 || this.password.length > 20) {
					uni.showToast({ title: '密码长度为6-20位', icon: 'none' });
					return;
				}
				if (this.password !== this.confirmPassword) {
					uni.showToast({ title: '两次密码不一致', icon: 'none' });
					return;
				}
				if (!this.isTermsAccepted) {
					uni.showToast({ title: '请先同意服务条款', icon: 'none' });
					return;
				}

				console.log('注册信息:', {
					phone: this.phone,
					code: this.code,
					password: this.password
				});
				uni.showToast({ title: '注册成功！', icon: 'none' });
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			toggleTerms() {
				this.isTermsAccepted = !this.isTermsAccepted;
			},
			
			openTermsPage() {
				const index = 2;
				uni.navigateTo({ url:  `/pages/terms/terms?key=${index}`}); 
			},
			openPrivateTermsPage(){
				const index = 2;
				uni.navigateTo({ url:  `/pages/privateTerms/privateTerms?key=${index}`}); 
			}
		}
	}
</script>

<style scoped>
	.img {
		position: absolute;
		height: 180px;
		width: 240px;
		bottom: 0px;
	}

	.MainBox {
		display: flex;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background-image: url(/static/images/bg3.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		flex-direction: column;
	}

	.CardBox {
		background-color: white;
		width: 90vw;
		height: 63vh;
		
		border-radius: 20px;
		margin-top: 130px;
		padding: 20px 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow-y: auto;
		position: absolute;
		z-index: 2;
	}

	.logoBox {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 130px;
		
	}

	.selectBox {
		display: flex;
		justify-content: space-between;
		width: 80%;
		gap: 16px;
		margin-top: 40px;
		margin-bottom: 20px;
	}

	.login,
	.register {
		height: 50px;
		font-size: 14px;
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50px;
		flex: 1;
	}

	.login {
		background-color: #FFF3E8;
		color: #D9926C;
		border: 1px solid #F3A479;
		border-radius: 20px 70px 20px 20px;
	}

	.register {
		background: linear-gradient(135deg, #FE8532, #F3A479);
		box-shadow: 0 4px 10px rgba(254, 133, 50, 0.3);
		border-radius: 20px 20px 20px 70px;
	}

	.inputItem {
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F3A479;
		padding: 10px 0;
		margin-bottom: 16px;
		width: 80%;
		position: relative;
	}

	.icon {
		width: 20px;
		height: 20px;
		margin-right: 12px;
		opacity: 0.8;
	}

	.inputField {
		flex: 1;
		font-size: 15px;
		color: #333;
		padding: 0;
	}

	.getCodeBtn {
		background: none;
		border: none;
		color: #FE8532;
		font-size: 14px;
		padding: 0;
		margin-left: 8px;
		min-width: 80px;
		text-align: right;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginBtn {
		background: linear-gradient(135deg, #FE8532, #F3A479);
		box-shadow: 0 4px 10px rgba(254, 133, 50, 0.3);
		height: 40px;
		width: 80%;
		font-size: 14px;
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50px;
		margin-top: 20px;
	}

	button::after {
		border: none;
	}

	.termsBox {
		width: 80%;
		margin-top: 20px;
		font-size: 13px;
		color: #666;
		display: flex;
		align-items: center;

		margin-top: 40px;
	}

	.termsBox checkbox {
		transform: scale(0.7);
		margin-right: 5px;
	}

	.termsBox text {
		color: #F3A479;
		text-decoration: underline;
		cursor: pointer;
	}
</style>